<template>
  <div class="questionnaire-processing page-container">
    <div class="bg">
      <div class="page-header">
        <h1 class="page-title">结果上传</h1>
        <p class="page-description">量表数据导入与处理工具</p>
      </div>
      <div class="content-container">
        <div class="modules-grid">
          <!-- 量表上传模块 -->
          <div class="upload-module module-card">
            <div class="module-header">
              <div class="module-icon">
                <i class="el-icon-upload"></i>
              </div>
              <h3 class="module-title">量表上传</h3>
            </div>

            <div class="module-body">
              <!-- 队名输入框 -->
              <div class="form-group">
                <label for="teamName" class="form-label">队别编号：</label>
                <input
                  type="text"
                  id="teamName"
                  v-model="teamName"
                  class="form-input"
                  placeholder="仅仅输入队别对应的数字即可"
                  maxlength="3"
                >
                <div class="form-hint">请输入队别编号（如：1、2、3），只需输入数字</div>
              </div>

              <!-- 文件上传区域 -->
              <div class="upload-area" @click="triggerFileUpload" @dragover.prevent @drop.prevent="handleFileDrop">
                <input
                  ref="fileInput"
                  type="file"
                  accept=".csv"
                  @change="handleFileSelect"
                  style="display: none;"
                >
                <div class="upload-content">
                  <i class="el-icon-upload2 upload-icon"></i>
                  <p class="upload-text">点击上传CSV文件</p>
                </div>
              </div>

              <!-- 文件信息显示 -->
              <div v-if="selectedFile" class="file-info">
                <div class="file-details">
                  <i class="el-icon-document file-icon"></i>
                  <div class="file-text">
                    <p class="file-name">{{ selectedFile.name }}</p>
                    <p class="file-size">{{ formatFileSize(selectedFile.size) }}</p>
                  </div>
                  <button class="remove-file-btn" @click="removeFile" title="移除文件">
                    <i class="el-icon-close"></i>
                  </button>
                </div>
              </div>

              <!-- 上传按钮 -->
              <div class="action-section">
                <button
                  class="upload-btn"
                  @click="uploadFile"
                  :disabled="!canUpload"
                  :class="{ 'uploading': uploading }"
                >
                  <i v-if="uploading" class="el-icon-loading"></i>
                  <i v-else class="el-icon-upload"></i>
                  {{ uploading ? '上传中...' : '开始上传' }}
                </button>
              </div>

              <!-- 上传结果显示 -->
              <div v-if="uploadResult" class="result-section">
                <div class="result-card" :class="uploadResult.success ? 'success' : 'error'">
                  <div class="result-header">
                    <i :class="uploadResult.success ? 'el-icon-success' : 'el-icon-error'"></i>
                    <h4>{{ uploadResult.success ? '上传成功' : '上传失败' }}</h4>
                  </div>
                  <div class="result-content">
                    <p>{{ uploadResult.message }}</p>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- 分析配置模块 -->
          <div class="analysis-config-module module-card">
            <div class="module-header">
              <div class="module-icon">
                <i class="el-icon-setting"></i>
              </div>
              <h3 class="module-title">分析配置</h3>
            </div>
            <div class="module-body analysis-config-body">
              <div class="form-group analysis-form-group" style="display:flex;align-items:center;gap:10px;flex-wrap:nowrap;">
                <label class="form-label" style="white-space:nowrap;width:90px;flex-shrink:0;">模型配置：</label>
                <select v-model="selectedModel" class="form-input" style="height:44px;min-width:180px;flex:1;">
                  <option v-for="model in modelList" :key="model.date" :value="model.date">
                    {{ model.date }}
                  </option>
                </select>
                <button class="refresh-btn" style="margin-left:8px;flex-shrink:0;" @click="showUploadModelDialog = true" title="上传新模型">
                  <i class="el-icon-plus"></i>
                </button>
              </div>
              <div class="form-group analysis-form-group">
                <label class="form-label">原始数据选择：</label>
                <select v-model="selectedRawData" class="form-input" style="height:44px;">
                  <option v-for="item in rawDataList" :key="item.index" :value="item.index">
                    {{ item.index }}队
                  </option>
                </select>
                <div class="form-hint">请选择需要分析的队伍原始数据</div>
              </div>
              <div class="action-section" style="margin-top:30px;">
                <button
                  class="upload-btn"
                  @click="analyseData"
                  :disabled="!selectedModel || !selectedRawData || analysing"
                  :class="{ uploading: analysing }"
                >
                  <i v-if="analysing" class="el-icon-loading"></i>
                  <i v-else class="el-icon-cpu"></i>
                  {{ analysing ? '分析中...' : '开始分析' }}
                </button>
              </div>
            </div>
          </div>

          <!-- 量表选择模块 -->
          <div class="selection-module module-card">
            <div class="module-header">
              <div class="module-icon">
                <i class="el-icon-folder-opened"></i>
              </div>
              <h3 class="module-title">量表选择</h3>
              <button
                class="refresh-btn"
                @click="manualRefresh"
                :disabled="loadingFolders"
                title="刷新文件夹列表"
              >
                <i class="el-icon-refresh" :class="{ 'rotating': loadingFolders }"></i>
              </button>
            </div>

            <div class="module-body">
              <div class="selection-description">
                <p>选择要在"结果查看"模块中展示的数据源</p>
              </div>

              <!-- 文件夹列表 -->
              <div class="folder-list">
                <div v-if="loadingFolders" class="loading-state">
                  <i class="el-icon-loading"></i>
                  <span>加载中...</span>
                </div>

                <div v-else-if="availableFolders.length === 0" class="empty-state">
                  <i class="el-icon-folder"></i>
                  <p>暂无可用的问卷数据</p>
                  <p class="empty-hint">请先上传问卷文件创建数据文件夹</p>
                </div>

                <div v-else class="folder-items">
                  <div
                    v-for="folder in availableFolders"
                    :key="folder.name"
                    class="folder-item"
                    :class="{ 'selected': selectedFolder === folder.name }"
                    @click="selectFolder(folder.name)"
                  >
                    <div class="folder-icon">
                      <i class="el-icon-folder"></i>
                    </div>
                    <div class="folder-info">
                      <div style="display: flex; align-items: center; gap: 10px;">
                        <h4 class="folder-title" style="margin: 0;">{{ folder.displayName }}</h4>
                        <select
                          v-model="folder.selectedModel"
                          class="form-input"
                          style="height:44px;max-width:220px;font-size:16px;"
                          @click.stop
                          @change="selectFolderModel(folder.name, folder.selectedModel)"
                        >
                          <option v-for="model in folder.models" :key="model" :value="model">
                            {{ model }}
                          </option>
                        </select>
                        <span class="form-hint">选择模型</span>
                      </div>
                    </div>
                    <div class="folder-status">
                      <i v-if="selectedFolder === folder.name" class="el-icon-check"></i>
                    </div>
                  </div>
                </div>
              </div>

              <!-- 选择按钮 -->
              <div class="action-section">
                <button
                  class="select-btn"
                  @click="applySelection"
                  :disabled="!selectedFolder || applying"
                  :class="{ 'applying': applying }"
                >
                  <i v-if="applying" class="el-icon-loading"></i>
                  <i v-else class="el-icon-check"></i>
                  {{ applying ? '应用中...' : '应用选择' }}
                </button>
              </div>

              <!-- 当前选择显示 -->
              <div v-if="currentDataSource" class="current-selection">
                <div class="current-info">
                  <i class="el-icon-success"></i>
                  <span>当前数据源：{{ currentDataSource }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="上传新模型" :visible.sync="showUploadModelDialog" width="420px" :close-on-click-modal="false" class="upload-model-dialog">
      <div class="upload-model-card">
        <div class="form-group">
          <label class="form-label">特征文件（.joblib）：</label>
          <input type="file" accept=".joblib" @change="e => uploadModelForm.features = e.target.files[0]" class="form-input" style="background:rgba(19,25,47,0.6);" />
        </div>
        <div class="form-group">
          <label class="form-label">模型文件（.joblib）：</label>
          <input type="file" accept=".joblib" @change="e => uploadModelForm.model = e.target.files[0]" class="form-input" style="background:rgba(19,25,47,0.6);" />
        </div>
        <div class="form-group">
          <label class="form-label">日期：</label>
          <input type="text" v-model="uploadModelForm.date" class="form-input" placeholder="如20250711" maxlength="20" style="background:rgba(19,25,47,0.6);" />
        </div>
        <div class="action-section" style="margin-top:20px;text-align:center;">
          <button class="upload-btn" :disabled="uploadingModel" @click="uploadNewModel">
            <i v-if="uploadingModel" class="el-icon-loading"></i>
            <i v-else class="el-icon-upload"></i>
            {{ uploadingModel ? '上传中...' : '上传模型' }}
          </button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import api from '@/api/questionPython';

export default {
  name: 'QuestionnaireProcessing',
  data() {
    return {
      teamName: '',
      selectedFile: null,
      uploading: false,
      uploadResult: null,
      // 问卷选择相关
      availableFolders: [],
      selectedFolder: '',
      loadingFolders: false,
      applying: false,
      currentDataSource: '',
      // 分析配置相关
      modelList: [],
      selectedModel: '',
      rawDataList: [],
      selectedRawData: '',
      analysing: false,
      showUploadModelDialog: false,
      uploadModelForm: {
        features: null,
        model: null,
        date: ''
      },
      uploadingModel: false
    }
  },
  computed: {
    canUpload() {
      return this.teamName.trim() && this.selectedFile && !this.uploading;
    },
    folderPath() {
      if (!this.teamName) return '';
      const teamNumber = this.extractTeamNumber(this.teamName);
      return `public/data/liangbiao/dui${teamNumber}`;
    }
  },
  mounted() {
    this.loadAvailableFolders();
    this.$nextTick(() => {
      this.loadCurrentDataSource();
    });
    this.loadModelList();
    this.loadRawDataList();
  },
  methods: {
    // 触发文件选择
    triggerFileUpload() {
      this.$refs.fileInput.click();
    },

    // 处理文件选择
    handleFileSelect(event) {
      const file = event.target.files[0];
      if (file) {
        this.validateAndSetFile(file);
      }
    },

    // 处理拖拽上传
    handleFileDrop(event) {
      const files = event.dataTransfer.files;
      if (files.length > 0) {
        this.validateAndSetFile(files[0]);
      }
    },

    // 验证并设置文件
    validateAndSetFile(file) {
      if (!file.name.toLowerCase().endsWith('.csv')) {
        this.$message.error('请选择CSV格式的文件');
        return;
      }

      if (file.size > 10 * 1024 * 1024) { // 10MB限制
        this.$message.error('文件大小不能超过10MB');
        return;
      }

      this.selectedFile = file;
      this.uploadResult = null; // 清除之前的结果
    },

    // 移除文件
    removeFile() {
      this.selectedFile = null;
      this.$refs.fileInput.value = '';
      this.uploadResult = null;
    },

    // 格式化文件大小
    formatFileSize(bytes) {
      if (bytes === 0) return '0 Bytes';
      const k = 1024;
      const sizes = ['Bytes', 'KB', 'MB', 'GB'];
      const i = Math.floor(Math.log(bytes) / Math.log(k));
      return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
    },

    // 提取队名中的数字（返回int）
    extractTeamNumber(teamName) {
      const chineseNumbers = {
        '一': 1, '二': 2, '三': 3, '四': 4, '五': 5,
        '六': 6, '七': 7, '八': 8, '九': 9, '十': 10
      };
      const arabicMatch = teamName.match(/\d+/);
      if (arabicMatch) {
        return parseInt(arabicMatch[0]);
      }
      for (const [chinese, arabic] of Object.entries(chineseNumbers)) {
        if (teamName.includes(chinese)) {
          return arabic;
        }
      }
      return 1;
    },

    // 上传文件（重做，调用uploadRawData）
    async uploadFile() {
      if (!this.canUpload) return;
      this.uploading = true;
      this.uploadResult = null;
      try {
        const index = this.extractTeamNumber(this.teamName);
        const file = this.selectedFile;
        const response = await api.uploadRawData(file, index);
        if (response.success) {
          this.uploadResult = {
            success: true,
            message: response.message || '文件上传成功！'
          };
          this.$message.success(this.uploadResult.message);
          // 上传成功后刷新问卷选择模块数据
          await this.loadAvailableFolders();
        } else {
          throw new Error(response.message || '上传失败');
        }
      } catch (error) {
        this.uploadResult = {
          success: false,
          message: error.message || '上传失败，请检查网络连接和后端服务'
        };
        this.$message.error('上传失败：' + (error.message || '未知错误'));
      } finally {
        this.uploading = false;
      }
    },

    // 加载可用的文件夹列表（重做，调用checkResult）
    async loadAvailableFolders() {
      this.loadingFolders = true;
      try {
        const res = await api.checkResult();
        if (res && Array.isArray(res.data)) {
          this.availableFolders = res.data.map(item => ({
            name: 'dui' + item.index,
            displayName: item.index + '队',
            fileCount: item.model.length,
            teamNumber: item.index,
            models: item.model,
            selectedModel: item.model && item.model.length > 0 ? item.model[0] : ''
          }));
        } else {
          this.availableFolders = [];
        }
      } catch (error) {
        this.availableFolders = [];
      } finally {
        this.loadingFolders = false;
      }
    },

    // 自动扫描文件夹
    async scanForFolders() {
      const folders = [];
      console.log('开始自动扫描文件夹...');

      // 扫描可能的文件夹范围（dui1 到 dui20）
      const maxTeamNumber = 20;

      for (let i = 1; i <= maxTeamNumber; i++) {
        const folderName = `dui${i}`;
        const folderInfo = await this.detectFolder(folderName, i);

        if (folderInfo) {
          folders.push(folderInfo);
          console.log(`发现文件夹: ${folderName} (${folderInfo.displayName})`);
        }
      }

      // 按队号排序
      folders.sort((a, b) => a.teamNumber - b.teamNumber);

      console.log(`扫描完成，共发现 ${folders.length} 个文件夹:`, folders);
      return folders;
    },

    // 检测单个文件夹是否存在
    async detectFolder(folderName, teamNumber) {
      try {
        // 尝试访问可能存在的文件来判断文件夹是否存在
        const possibleFiles = [
          `${folderName}.csv`,
          'liangbiao1.csv',
          'wenjuan1.csv',
          'top30_risk.csv',
          `${teamNumber}duiwenjuan1.csv`,
          `${teamNumber}队wenjuan1.csv`
        ];

        const existingFiles = [];

        for (const fileName of possibleFiles) {
          try {
            const response = await fetch(`/data/liangbiao/${folderName}/${fileName}`, {
              method: 'HEAD'
            });

            if (response.ok) {
              existingFiles.push(fileName);
            }
          } catch (error) {
            // 文件不存在，继续检查下一个
            continue;
          }
        }

        // 如果找到任何文件，说明文件夹存在
        if (existingFiles.length > 0) {
          return {
            name: folderName,
            displayName: `${teamNumber}队`,
            fileCount: existingFiles.length,
            teamNumber: teamNumber,
            files: existingFiles,
            lastDetected: new Date().toISOString()
          };
        }

        return null;

      } catch (error) {
        console.log(`检测文件夹 ${folderName} 时出错:`, error.message);
        return null;
      }
    },

    // 获取已知的文件夹列表（作为后备）
    getKnownFolders() {
      // 返回已知存在的文件夹信息作为后备
      const knownFolders = [
        {
          name: 'dui2',
          displayName: '2队',
          fileCount: 2,
          teamNumber: 2,
          files: ['dui2.csv', 'top30_risk.csv'],
          isKnown: true
        }
      ];

      // 按队号排序
      knownFolders.sort((a, b) => a.teamNumber - b.teamNumber);

      console.log('使用已知文件夹列表作为后备:', knownFolders);
      return knownFolders;
    },

    // 选择文件夹
    selectFolder(folderName) {
      this.selectedFolder = folderName;
    },

    // 选择队伍下的模型
    selectFolderModel(folderName, model) {
      const folder = this.availableFolders.find(f => f.name === folderName);
      if (folder) {
        folder.selectedModel = model;
      }
    },

    // 应用选择
    async applySelection() {
      if (!this.selectedFolder) return;

      this.applying = true;
      try {
        // 更新全局状态，通知"第一次问卷"模块切换数据源
        const folderInfo = this.availableFolders.find(f => f.name === this.selectedFolder);
        if (folderInfo) {
          // 使用localStorage来存储当前选择的数据源
          localStorage.setItem('currentQuestionnaireDataSource', this.selectedFolder);
          localStorage.setItem('currentQuestionnaireModel', folderInfo.selectedModel); // 保存模型
          localStorage.setItem('currentQuestionnaireRawData', folderInfo.teamNumber);   // 保存原始数据编号

          this.currentDataSource = folderInfo.displayName;

          // 触发全局事件通知其他组件数据源已更改
          this.$root.$emit('questionnaireDataSourceChanged', {
            folder: this.selectedFolder,
            displayName: folderInfo.displayName
          });

          this.$message.success(`已切换到 ${folderInfo.displayName} 的数据`);
        }
      } catch (error) {
        console.error('应用选择失败:', error);
        this.$message.error('切换数据源失败');
      } finally {
        this.applying = false;
      }
    },

    // 加载当前数据源
    loadCurrentDataSource() {
      const currentSource = localStorage.getItem('currentQuestionnaireDataSource');
      console.log('当前保存的数据源:', currentSource);
      console.log('可用文件夹数量:', this.availableFolders.length);

      if (currentSource && this.availableFolders.length > 0) {
        const folderInfo = this.availableFolders.find(f => f.name === currentSource);
        if (folderInfo) {
          this.currentDataSource = folderInfo.displayName;
          this.selectedModel = folderInfo.selectedModel; // 加载模型
          this.selectedRawData = folderInfo.teamNumber; // 加载原始数据编号
          console.log('设置当前数据源为:', this.currentDataSource);
        } else {
          // 如果当前选择的数据源不存在，清除选择
          localStorage.removeItem('currentQuestionnaireDataSource');
          this.currentDataSource = '';
          this.selectedModel = '';
          this.selectedRawData = '';
          console.log('当前数据源不存在，已清除');
        }
      } else {
        this.currentDataSource = '';
        this.selectedModel = '';
        this.selectedRawData = '';
        console.log('没有保存的数据源或没有可用文件夹');
      }
    },

    // 手动刷新文件夹列表
    async manualRefresh() {
      await this.loadAvailableFolders();
      this.$message.success('文件夹列表已刷新');
    },

    async loadModelList() {
      try {
        const res = await api.checkModels();
        if (res && Array.isArray(res.data)) {
          this.modelList = res.data;
          if (this.modelList.length > 0) {
            this.selectedModel = this.modelList[0].date;
          }
        }
      } catch (e) {
        this.modelList = [];
      }
    },
    async loadRawDataList() {
      try {
        const res = await api.checkData();
        if (res && Array.isArray(res.data)) {
          this.rawDataList = res.data;
          if (this.rawDataList.length > 0) {
            this.selectedRawData = this.rawDataList[0].index;
          }
        }
      } catch (e) {
        this.rawDataList = [];
      }
    },
    async analyseData() {
      if (!this.selectedModel || !this.selectedRawData) return;
      this.analysing = true;
      try {
        const res = await api.analyse(this.selectedModel, this.selectedRawData);
        if (res && res.success) {
          this.$message.success(res.message || '分析成功！');
          // 分析成功后，自动获取分析结果csv并存入localStorage
          const csvBlob = await api.viewResult(this.selectedModel, this.selectedRawData);
          let csvText = '';
          if (csvBlob instanceof Blob) {
            csvText = await csvBlob.text();
          } else if (typeof csvBlob === 'string') {
            csvText = csvBlob;
          }
          localStorage.setItem('questionnaireResultCSV', csvText);
        } else {
          throw new Error(res && res.message ? res.message : '分析失败');
        }
      } catch (e) {
        this.$message.error(e.message || '分析失败');
      } finally {
        this.analysing = false;
      }
    },
    async uploadNewModel() {
      if (!this.uploadModelForm.features || !this.uploadModelForm.model || !this.uploadModelForm.date) {
        this.$message.error('请完整选择特征文件、模型文件和日期');
        return;
      }
      this.uploadingModel = true;
      try {
        const res = await api.uploadModels(this.uploadModelForm.features, this.uploadModelForm.model, this.uploadModelForm.date);
        if (res && res.success) {
          this.$message.success(res.message || '模型上传成功！');
          this.showUploadModelDialog = false;
          this.uploadModelForm = { features: null, model: null, date: '' };
          await this.loadModelList();
        } else {
          throw new Error(res && res.message ? res.message : '上传失败');
        }
      } catch (e) {
        this.$message.error(e.message || '上传失败');
      } finally {
        this.uploadingModel = false;
      }
    }
  }
}
</script>

<style scoped>
.page-container {
  width: 100%;
  height: 100vh;
  min-width: 100vw;
  color: #68d8fe;
  overflow: auto; /* 改为auto，允许滚动 */
  position: relative;
}

.bg {
  width: 100%;
  min-width: 100vw;
  min-height: 100vh;
  padding: 10px 16px 20px 16px;
  background-image: url("~@/assets/pageBg.png");
  background-size: 100% 100% !important;
  background-position: center center;
  /* 移除overflow: hidden，允许内容滚动 */
}

.page-header {
  text-align: center;
  margin-bottom: 30px;
  padding-top: 20px;
}

.page-title {
  font-size: 28px;
  font-weight: bold;
  color: #68d8fe;
  margin-bottom: 10px;
}

.page-description {
  font-size: 16px;
  color: #a0a0a0;
  margin: 0;
}

.content-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px 40px 20px;
  min-height: calc(100vh - 140px);
  /* 确保内容容器可以正常滚动 */
}

.modules-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  margin-bottom: 50px;
  padding-bottom: 20px;
  /* 确保网格布局不会阻止滚动 */
}

/* 为每个模块卡片添加滚动支持 */
.module-card {
  background: rgba(19, 25, 47, 0.8);
  border-radius: 12px;
  border: 1px solid rgba(104, 216, 254, 0.3);
  padding: 25px;
  /* 确保模块内容可以正常显示 */
  overflow: visible;
}

/* 为模块体添加滚动支持 */
.module-body {
  /* 移除任何可能阻止滚动的限制 */
  overflow: visible;
}

/* 特别为量表选择模块的文件夹列表添加滚动 */
.folder-list {
  margin-bottom: 20px;
  max-height: 400px; /* 限制最大高度 */
  overflow-y: auto; /* 添加垂直滚动 */
}

.folder-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* 确保文件夹项目可以正常滚动 */
}

/* 自定义滚动条样式 */
.folder-list::-webkit-scrollbar {
  width: 8px;
  background: rgba(19, 25, 47, 0.3);
  border-radius: 4px;
}

.folder-list::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #68d8fe 60%, #1a3c8f 100%);
  border-radius: 4px;
}

.folder-list::-webkit-scrollbar-track {
  background: rgba(19, 25, 47, 0.3);
  border-radius: 4px;
}

/* 为整个页面添加滚动条样式 */
.page-container::-webkit-scrollbar {
  width: 12px;
  background: rgba(19, 25, 47, 0.3);
  border-radius: 6px;
}

.page-container::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #68d8fe 60%, #1a3c8f 100%);
  border-radius: 6px;
}

.page-container::-webkit-scrollbar-track {
  background: rgba(19, 25, 47, 0.3);
  border-radius: 6px;
}

/* 确保移动端也能正常滚动 */
@media (max-width: 768px) {
  .page-container {
    height: 100vh;
    overflow: auto; /* 移动端也允许滚动 */
  }

  .bg {
    padding: 10px;
    height: auto; /* 改为auto，适应内容高度 */
    min-height: 100vh;
    overflow: visible; /* 移除overflow限制 */
  }

  .content-container {
    padding: 0 10px 40px 10px;
    min-height: calc(100vh - 120px);
  }

  /* 移动端模块卡片样式调整 */
  .module-card {
    padding: 20px;
  }

  /* 移动端表单输入框样式 */
  .form-input {
    max-width: 100%;
  }

  /* 移动端上传区域样式 */
  .upload-area {
    padding: 25px 15px;
  }

  /* 移动端文件详情样式 */
  .file-details {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .remove-file-btn {
    align-self: flex-end;
  }

  /* 移动端文件夹项目样式 */
  .folder-item {
    padding: 12px;
  }

  .folder-title {
    font-size: 14px;
  }

  /* 移动端滚动条隐藏 */
  .page-container::-webkit-scrollbar {
    width: 0px;
    background: transparent;
  }
  
  .bg::-webkit-scrollbar {
    width: 0px;
    background: transparent;
  }
}

.module-header {
  display: flex;
  align-items: center;
  margin-bottom: 25px;
  position: relative;
}

.module-icon {
  font-size: 24px;
  color: #68d8fe;
  margin-right: 15px;
}

.module-title {
  font-size: 22px;
  color: #68d8fe;
  margin: 0;
  font-weight: bold;
  flex: 1;
}

.refresh-btn {
  background: none;
  border: 1px solid rgba(104, 216, 254, 0.3);
  color: #68d8fe;
  padding: 8px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-left: 15px;
}

.refresh-btn:hover:not(:disabled) {
  background: rgba(104, 216, 254, 0.1);
  border-color: #68d8fe;
}

.refresh-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.refresh-btn i {
  font-size: 16px;
  transition: transform 0.3s ease;
}

.refresh-btn i.rotating {
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.form-group {
  margin-bottom: 25px;
}

.form-label {
  display: block;
  font-size: 16px;
  color: #68d8fe;
  margin-bottom: 8px;
  font-weight: 500;
}

.form-input {
  width: 100%;
  max-width: 400px;
  padding: 12px 16px;
  background: rgba(19, 25, 47, 0.6);
  border: 1px solid rgba(104, 216, 254, 0.3);
  border-radius: 6px;
  color: #ffffff;
  font-size: 14px;
  transition: all 0.3s ease;
}

.form-input:focus {
  outline: none;
  border-color: #68d8fe;
  box-shadow: 0 0 0 2px rgba(104, 216, 254, 0.2);
}

.form-input::placeholder {
  color: #a0a0a0;
}

.form-hint {
  font-size: 12px;
  color: #a0a0a0;
  margin-top: 5px;
  margin-bottom: 0;
}

.upload-area {
  border: 2px dashed rgba(104, 216, 254, 0.4);
  border-radius: 8px;
  padding: 30px 15px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(19, 25, 47, 0.3);
  margin: 15px 0;
}

.upload-area:hover {
  border-color: #68d8fe;
  background: rgba(19, 25, 47, 0.5);
}

.upload-content {
  pointer-events: none;
}

.upload-icon {
  font-size: 36px;
  color: #68d8fe;
  margin-bottom: 10px;
}

.upload-text {
  font-size: 14px;
  color: #ffffff;
  margin: 0;
}

.upload-hint {
  font-size: 12px;
  color: #a0a0a0;
  margin: 0;
}

/* 问卷选择模块样式 */
.selection-description {
  margin-bottom: 20px;
}

.selection-description p {
  color: #a0a0a0;
  font-size: 14px;
  margin: 0;
}

.folder-list {
  margin-bottom: 20px;
}

.loading-state, .empty-state {
  text-align: center;
  padding: 30px 20px;
  color: #a0a0a0;
}

.loading-state i, .empty-state i {
  font-size: 24px;
  margin-bottom: 10px;
  display: block;
}

.empty-hint {
  font-size: 12px;
  color: #666;
  margin-top: 5px;
}

.folder-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.folder-item {
  display: flex;
  align-items: center;
  padding: 15px;
  background: rgba(19, 25, 47, 0.4);
  border: 1px solid rgba(104, 216, 254, 0.2);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.folder-item:hover {
  background: rgba(19, 25, 47, 0.6);
  border-color: rgba(104, 216, 254, 0.4);
}

.folder-item.selected {
  background: rgba(104, 216, 254, 0.1);
  border-color: #68d8fe;
}

.folder-icon {
  font-size: 20px;
  color: #68d8fe;
  margin-right: 15px;
}

.folder-info {
  flex: 1;
}

.folder-title {
  font-size: 16px;
  color: #ffffff;
  margin: 0 0 5px 0;
  font-weight: 500;
}

.folder-details {
  font-size: 12px;
  color: #a0a0a0;
  margin: 0;
}

.folder-status {
  font-size: 18px;
  color: #52c41a;
}

.select-btn {
  background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
  border: none;
  color: #ffffff;
  padding: 10px 25px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 120px;
  justify-content: center;
}

.select-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(82, 196, 26, 0.3);
}

.select-btn:disabled {
  background: rgba(82, 196, 26, 0.3);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.select-btn.applying {
  background: rgba(82, 196, 26, 0.6);
}

.current-selection {
  margin-top: 20px;
  padding: 15px;
  background: rgba(82, 196, 26, 0.1);
  border: 1px solid rgba(82, 196, 26, 0.3);
  border-radius: 8px;
}

.current-info {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #52c41a;
  font-size: 14px;
}

.file-info {
  margin-top: 20px;
  padding: 15px;
  background: rgba(19, 25, 47, 0.6);
  border-radius: 8px;
  border: 1px solid rgba(104, 216, 254, 0.2);
}

.file-details {
  display: flex;
  align-items: center;
}

.file-icon {
  font-size: 24px;
  color: #68d8fe;
  margin-right: 15px;
}

.file-text {
  flex: 1;
}

.file-name {
  font-size: 14px;
  color: #ffffff;
  margin: 0 0 5px 0;
  font-weight: 500;
}

.file-size {
  font-size: 12px;
  color: #a0a0a0;
  margin: 0;
}

.remove-file-btn {
  background: none;
  border: none;
  color: #ff6b6b;
  font-size: 18px;
  cursor: pointer;
  padding: 5px;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.remove-file-btn:hover {
  background: rgba(255, 107, 107, 0.1);
}

.action-section {
  margin-top: 30px;
  text-align: center;
}

.upload-btn {
  background: linear-gradient(135deg, #68d8fe 0%, #4facfe 100%);
  border: none;
  color: #ffffff;
  padding: 12px 30px;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 140px;
  justify-content: center;
}

.upload-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(104, 216, 254, 0.3);
}

.upload-btn:disabled {
  background: rgba(104, 216, 254, 0.3);
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.upload-btn.uploading {
  background: rgba(104, 216, 254, 0.6);
}

.result-section {
  margin-top: 30px;
}

.result-card {
  background: rgba(19, 25, 47, 0.8);
  border-radius: 12px;
  padding: 25px;
  border-left: 4px solid;
}

.result-card.success {
  border-left-color: #52c41a;
}

.result-card.error {
  border-left-color: #ff4d4f;
}

.result-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.result-header i {
  font-size: 20px;
  margin-right: 10px;
}

.result-card.success .result-header i {
  color: #52c41a;
}

.result-card.error .result-header i {
  color: #ff4d4f;
}

.result-header h4 {
  margin: 0;
  font-size: 18px;
  color: #ffffff;
}

.result-content p {
  margin: 0 0 10px 0;
  color: #ffffff;
  line-height: 1.6;
}

.result-details {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid rgba(104, 216, 254, 0.2);
}

.result-details p {
  margin: 8px 0;
  font-size: 14px;
}

.result-details strong {
  color: #68d8fe;
}

/* 分析配置模块居中适配 */
.analysis-config-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.analysis-form-group {
  width: 100%;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}
@media (max-width: 768px) {
  .analysis-form-group {
    max-width: 100%;
  }
}
@media (max-width: 768px) {
  .analysis-form-group {
    flex-wrap: wrap !important;
  }
  .analysis-form-group .form-label {
    width: auto !important;
    margin-bottom: 8px;
  }
  .analysis-form-group select {
    min-width: 0 !important;
    width: 100%;
  }
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .modules-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* 上传新模型弹窗卡片样式 */
.upload-model-dialog .el-dialog__body {
  padding: 0 24px 24px 24px;
  background: none;
}
.upload-model-card {
  background: rgba(19, 25, 47, 0.85);
  border-radius: 14px;
  box-shadow: 0 4px 24px 0 rgba(104,216,254,0.10);
  padding: 28px 18px 18px 18px;
  margin-top: 10px;
}
.upload-model-card .form-group {
  margin-bottom: 22px;
}
.upload-model-card .form-label {
  color: #68d8fe;
  font-size: 15px;
  margin-bottom: 8px;
  display: block;
}
.upload-model-card .form-input[type="file"] {
  background: rgba(19,25,47,0.6);
  color: #fff;
  border: 1px solid rgba(104,216,254,0.3);
  border-radius: 6px;
  padding: 8px 10px;
  width: 100%;
}
.upload-model-card .form-input[type="text"] {
  width: 100%;
}
.upload-model-card .upload-btn {
  width: 100%;
  margin: 0 auto;
}
/* 优化el-dialog整体背景为深色风格 */
.upload-model-dialog .el-dialog {
  background: rgba(19, 25, 47, 0.97) !important;
  border-radius: 16px;
  box-shadow: 0 8px 32px 0 rgba(104,216,254,0.10);
}
.upload-model-dialog .el-dialog__header {
  background: transparent;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}
.upload-model-dialog .el-dialog__title {
  color: #68d8fe !important;
}
.upload-model-dialog .el-dialog__body {
  background: transparent;
}
/* 提高特定性，强制深色弹窗头部和内容 */
.upload-model-dialog >>> .el-dialog__header,
.upload-model-dialog >>> .el-dialog__body {
  background: rgba(19, 25, 47, 0.97) !important;
  border-radius: 0 0 16px 16px;
}
.upload-model-dialog >>> .el-dialog__header {
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
}
.upload-model-dialog >>> .el-dialog__body {
  border-bottom-left-radius: 16px;
  border-bottom-right-radius: 16px;
}
/* 修复el-dialog弹窗边角突兀问题 */
.upload-model-dialog >>> .el-dialog {
  background: rgba(19, 25, 47, 0.97) !important;
  border-radius: 16px !important;
  box-shadow: 0 8px 32px 0 rgba(104,216,254,0.10);
  overflow: hidden;
}
.upload-model-dialog >>> .el-dialog__header,
.upload-model-dialog >>> .el-dialog__body {
  background: transparent !important;
  border-radius: 0 !important;
}
</style>